<template>
    <div class="course-video">
      <div class="video-list">
        <!-- 大标题部分 -->
        <div class="chapter" v-for="chapter in courseList" :key="chapter.id">
          <div class="chapter-title">{{ chapter.label }}</div>
          <!-- 小节部分 -->
          <div class="section" v-for="section in chapter.children" :key="section.id">
            <div class="section-content" @click="playVideo(section)">
              <div class="section-info">
                <div class="section-title">{{ section.label }}</div>
                <!-- <div class="section-author">主讲教师</div> -->
              </div>
              <div class="play-btn" v-if="hasVideo(section.id)">
                <i class="el-icon-video-play"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 视频播放弹窗 -->
      <el-dialog
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
        custom-class="video-dialog"
        :modal="false"
        :append-to-body="true"
        :modal-append-to-body="false"
      >
        <video
          v-if="videoList.length > 0"
          ref="videoPlayer"
          :src="baseUrl + videoList[currentVideoIndex].crFileUrl"
          class="video-player"
          controls
          autoplay
        ></video>
        <div v-if="videoList.length > 1" class="video-switch-group" style="text-align:center;margin-top:16px;">
          <el-button
            v-for="(video, idx) in videoList"
            :key="video.crId"
            :type="currentVideoIndex === idx ? 'primary' : 'default'"
            size="mini"
            @click="switchVideo(idx)"
            style="margin:0 4px;"
          >
            {{ idx + 1 }}
          </el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import courseRelated from '@/api/courseRelated'
  import { Loading } from 'element-ui'
  export default {
    name: 'CourseVideo',
    props: {
      chapterTree: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        dialogVisible: false,
        videoList: [], // 当前小节所有视频
        currentVideoIndex: 0, // 当前播放视频索引
        courseList: [],
        resourceList: [],
        baseUrl: process.env.VUE_APP_BASE_API,
        loadingInstance: null
      }
    },
    watch: {
      chapterTree: {
        handler(newVal) {
          if (newVal && newVal.length > 0) {
            this.courseList = newVal.filter(item => item.children && item.children.length > 0);
          }
        },
        immediate: true
      }
    },
    created() {
      courseRelated.getAllVideo().then(response => {
        this.resourceList = response.data || [];
      })
    },
    methods: {
      playVideo(section) {
        this.loadingInstance = Loading.service({ fullscreen: true, lock: true, text: '加载中...' });
        courseRelated.getCourseResource({ chapterId: section.id, resourceCategory: 'video' }).then(response => {
          this.videoList = (response.rows || []).filter(item => item.crFileUrl);
          this.currentVideoIndex = 0;
          if (this.loadingInstance) this.loadingInstance.close();
          if (this.videoList.length > 0) {
            this.dialogVisible = true;
          }
        }).catch(() => {
          if (this.loadingInstance) this.loadingInstance.close();
        });
      },
      handleClose() {
        if (this.$refs.videoPlayer) {
          this.$refs.videoPlayer.pause();
        }
        this.dialogVisible = false;
        this.videoList = [];
        this.currentVideoIndex = 0;
      },
      hasVideo(sectionId) {
        return this.resourceList.some(item => item.chapterId === sectionId && item.resourceCategory === 'video');
      },
      switchVideo(idx) {
        this.currentVideoIndex = idx;
        this.$nextTick(() => {
          if (this.$refs.videoPlayer) {
            this.$refs.videoPlayer.load();
          }
        });
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .course-video {
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    .video-list {
      .chapter {
        margin-bottom: 30px;
        
        .chapter-title {
          font-size: 20px;
          font-weight: bold;
          color: #333;
          padding: 10px 0;
          border-bottom: 2px solid #e8e8e8;
          margin-bottom: 15px;
        }
  
        .section {
          padding: 0 20px;
          
          .section-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            margin: 0 -20px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: all 0.3s ease;
  
            &:hover {
              background-color: #fff;
              
              .play-btn {
                opacity: 1;
                transform: scale(1);
              }
            }
  
            .section-info {
              flex: 1;
              display: flex;
              align-items: center;
              gap: 40px;
              margin-right: 20px;
              font-family:'Alibaba PuHuiTi 3.0', 'Microsoft YaHei', sans-serif;
              .section-title {
                font-size: 16px;
                color: #333;
                flex: 1;
              }
  
              .section-author {
                width: 100px;
                color: #666;
                font-size: 14px;
              }
            }
  
            .play-btn {
              width: 32px;
              height: 32px;
              border-radius: 50%;
              background-color: #409EFF;
              display: flex;
              align-items: center;
              justify-content: center;
              opacity: 0.6;
              transform: scale(0.9);
              transition: all 0.3s ease;
  
              i {
                color: #fff;
                font-size: 16px;
              }
  
              &:hover {
                opacity: 1;
                transform: scale(1.1);
              }
            }
          }
        }
      }
    }
  }
  
  // 弹窗样式
  .video-dialog {
    .video-player {
      width: 100%;
      height: auto;
      max-height: 70vh;
      object-fit: contain;
    }
  
    .el-dialog__body {
      padding: 0;
      background: #000;
    }
  
     .el-dialog__footer {
      text-align: center;
      background: #000;
    }
  }
  
  ::v-deep .el-dialog {
    margin-top: 5vh !important;
  }
  ::v-deep .el-dialog__header{
    background: #262626;
  }
  ::v-deep .el-dialog__body{
    background: #262626;
  }
  ::v-deep .el-dialog__footer{
    background: #262626;
  }
  </style> 